<template>
    <div class="forget-wrap">
        <div class="head">
            <div @click="replace('/')" class="logo" :style="{backgroundImage: 'url(' +configObj.logo+ ')'}"></div>
        </div>
        <div class="wrap">
            <div class="wrap-content">
                <div class="login-content">
                    <div class="title">
                        <div @click="login" class="name">重设密码</div>
                    </div>
                    <el-form :model="information" :rules="rules" ref="information">
                        <el-form-item prop="mobile">
                            <div class="input-list">
                                <el-input
                                placeholder="手机号码"
                                v-model="information.mobile"
                                clearable>
                                </el-input>
                            </div>   
                        </el-form-item>
                        <el-form-item prop="code">
                            <div class="input-list code">
                                <el-input
                                placeholder="验证码"
                                v-model="information.code"
                                clearable>
                                </el-input>
                                <div @click="getCode" class="code-btn">{{codeMsg}}</div>
                            </div>   
                        </el-form-item>
                        <el-form-item prop="newPwd">
                            <div class="input-list">
                                <el-input
                                placeholder="新密码"
                                v-model="information.newPwd"
                                type="password"
                                clearable>
                                </el-input>
                            </div>    
                        </el-form-item>
                        <el-form-item prop="confirmPwd">
                            <div class="input-list">
                                <el-input
                                placeholder="再次输入新密码"
                                v-model="information.confirmPwd"
                                type="password"
                                clearable>
                                </el-input>
                            </div>    
                            <div v-if="confrimState" class="el-form-item__error">新密码与确认密码不一致！</div>
                        </el-form-item>
                        <div @click="login('information')" class="btn">提交</div> 
                    </el-form>  
                    <div class="link-wrap">
                        <div  class="forget"></div>
                        <div @click="replace('/login')" class="register">返回登录页面</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="tip">版权所有：{{configObj.desc}}</div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data() {
        return {
            configObj:'',
            companyName:'创巢',
            information:{
                code:'',
                confirmPwd:'',
                mobile:'',
                newPwd:''
            },
            confrimState:false,
            codeMsg:'获取验证码',
            rules: {
                mobile:[
                    {required: true, message: '请输入手机号', trigger: 'change'  }
                ],
                code:[
                    {required: true, message: '请输入验证码', trigger: 'change'  }
                ],
                newPwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
                ],
                confirmPwd: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
                ]
            },
            codeImg:''
        }
    },
    components: {
  
    },  
    created() {
        let arr = location.hostname.split('.');
        let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName];
        this.companyName = this.configObj.name
    },
    mounted(){
    },
    methods:{
        login(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.information.confirmPwd != this.information.newPwd){
                        this.confrimState = true
                        return;
                    }else{
                        this.confrimState = false
                    }
                    let url = CONSTANT.URL.WEB.FINDPWD;
                    let data = {
                            code:this.information.code,
                            confirmPwd:this.information.confirmPwd,
                            mobile:this.information.mobile,
                            newPwd:this.information.newPwd
                    },
                    dataForm = { }
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                message: '密码重设成功！',
                                type: 'success'
                            });
                            this.$router.replace('/login')
                        }else{
                             this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
            
        },
        getCode(){
            if (!this.information.mobile) {
                this.$message.error('手机号不能为空');
                return;
            }
            if (!(/^1[34578]\d{9}$/.test(this.information.mobile))) {
                this.$message.error('手机号格式不对');
                return;
            }
            if (this.codeMsg != '获取验证码') {
                return;
            }
            let time = 60;
            this.getCodeNum()
            setInterval(() => {
                if (time <= 1) {
                    this.codeMsg = '获取验证码'
                    return;
                }
                this.codeMsg =time-- + 's'
            }, 1000)
        },
        getCodeNum(){
            let  url = CONSTANT.URL.WEB.FINDMOBILECODE,
                data = {mobile:this.information.mobile,bizType:'find_pwd'},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.information.code = res.data.bussData.code
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                }else{
                this.$message.error(res.msg);
                }
            })
        },
        replace(link){
            this.$router.replace(link)
        }
    }
}
</script>

<style lang="scss">
    .forget-wrap{
        .head{
            position: relative;
            height: 138px;
            line-height: 138px;
            background-color: #F5F5F5;
            width: 100%;
            // overflow: hidden;
            .logo{
                cursor:pointer;
                position: absolute;
                top: 31px;
                left: 18.7%;
                width: 313px;
                height: 76px;
                color: #fff;
                background-size: 100%;
            }
        }
        .el-form-item{
            margin-bottom: 0!important;
            .el-form-item__content{
                margin-left: 0!important;
            }
        }
        .wrap{
            position: relative;
            height: 770px;
            background: url(../../images/bg.png)  no-repeat ;
            background-size: cover;
            .wrap-content{
                position: relative;
                width: 1200px;
                margin: 0 auto;
                height: 770px;
            }
            .login-content{
                padding: 0 30px;
                position: absolute;
                top: 172px;
                right: 0px;
                width: 300px;
                height: 454px;
                background-color: #fff;
                border: 1px solid #e1e1e1;
                .title{
                    border-bottom: 1px solid #E1E1E1;
                    margin-top: 11px;
                    .name{
                        height: 54px;
                        line-height: 54px;
                        width: 200px;
                        text-align: center;
                        color: #ED7018;
                        font-size: 19px;
                        border-bottom: 2px solid #ED7018;
                        margin: 0 auto;
                    }
                }
                .input-list{
                    margin-top: 23px;
                    .el-input{
                        input{
                            width: 313px;
                            height: 42px;
                            font-size: 14px;
                        }
                    }
                    .el-input__inner{
                        border: 1px solid #e1e1e1;
                        height: 42px;
                        font-size: 18px;
                        border-radius: 2px;
                        -webkit-border-radius: 2px;
                        line-height: 42px;
                    }
                    &.code{
                        position: relative;
                        width: 313px;
                        .el-input__inner{
                             width: 205px;
                        }
                        .code-btn{
                            cursor:pointer;
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 108px;
                            height: 42px;
                            background-color: #ED7018;
                            color: #fff;
                            line-height: 42px;
                            text-align: center;
                            box-sizing: border-box;
                            cursor: pointer;
                            &:hover{
                                background-color: #ED9000;
                                transition:all .2s linear
                            }
                        }
                    }
                }
                .btn{
                    width: 313px;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    color: #fff;
                    font-size: 24px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                    margin-top: 23px;
                    background-color: #ED7018;
                    font-size: 14px;
                    cursor: pointer;
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    }
                }
                .link-wrap{
                    overflow: hidden;
                    margin-top: 23px;
                    font-size: 14px;
                    color: #999;
                    .forget{
                        float: left;
                        cursor: pointer;
                    }
                    .register{
                        color: #999999;
                        float: right;   
                        cursor: pointer;
                        &:hover{
                            color: #ED7018;
                        }
                    }
                }
            }
        }
        .footer{
            height: 169px;
            width: 100%;
            background-color: #f5f5f5;
            .tip{
                font-size: 14px;
                color: #999;
                padding-top: 43px;
                padding-left: 18.6979%;
            }
        }
    }
</style>
